<template>
  <div class="container">
    <el-alert
            title="欢迎使用webgis 2d"
            type="success"
            :closable="false">
    </el-alert>
    <h1 class="topTitle">2D地图功能总览</h1>


    <div  v-for="item in map2dDemoArr" :key="item.name">
    <h2>{{item.name}}</h2>
    <el-row :gutter="12">
      <el-col :span="6" v-for="child_item in item.items" :key="child_item.name">
        <el-card :body-style="{ padding: '10px' }"  >
          <img :src="child_item.image_url" class="image">
          <div style="padding: 14px;">
            <span>{{child_item.name}}</span> <span  class="time">{{child_item.desc}}</span>
            <el-button type="text" class="button"> <router-link :to="child_item.path">查看</router-link> </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'map2dIndex',
  components: {
  },
  data() {
    return {
      map5: null,
      url: "",
      attr: "",
      mapWindowStyle: {
        height: '0px'
      },
      map2dDemoArr:[
        {
          name:"基本地图",
          items:[
          {name:"基本地图",desc:"基本地图演示",path:"map2dBasisPage", image_url:"/static/images/map2d/map2d_basis_page.png"},
          {name:"鹰眼图",desc:"鹰眼图",path:"map2dEyePage", image_url:"/static/images/map2d/map2d_basis_eye.png"},
          {name:"标记",desc:"标记",path:"map2dMarkerPage", image_url:"/static/images/map2d/map2d_basis_marker.png"},
          {name:"自定义标记",desc:"自定义标记",path:"map2dIconMarkerPage", image_url:"/static/images/map2d/map2d_basis_popinfo_marker.png"},
          {name:"弹出信息标记",desc:"弹出信息标记",path:"map2dPopInfoMarkerPage", image_url:"/static/images/map2d/map2d_basis_tooltips_marker.png"},
         ]
        },
        {
          name:"矢量图",
          items:[
            {name:"多边形",desc:"多边形",path:"map2dPolygonPage", image_url:"/static/images/map2d/map2d_sharp_polygon.png"},
            {name:"圆形",desc:"圆形",path:"map2dCirclePage", image_url:"/static/images/map2d/map2d_sharp_circle.png"},
            {name:"矩形",desc:"矩形",path:"map2dRectanglePage", image_url:"/static/images/map2d/map2d_sharp_rectangle.png"},
            {name:"折线",desc:"折线",path:"map2dPolylinePage", image_url:"/static/images/map2d/map2d_sharp_polyline.png"},

          ]
        },
        {
          name:"高级功能",
          items:[
            {name:"GEOJSON",desc:"GEOJSON",path:"map2dGeoJsonLayerPage", image_url:"/static/images/map2d/map2d_high_geojson.png"},
            {name:"标绘",desc:"标绘",path:"map2dDrawLayerPage", image_url:"/static/images/map2d/map2d_high_draw.png"},
            {name:"飞线图",desc:"飞线图",path:"map2dFlyLayerPage", image_url:"/static/images/map2d/map2d_feixian_map.png"},
            {name:"热力图",desc:"热力图",path:"map2dHeatLayerPage", image_url:"/static/images/map2d/map2d_high_heat.png"},
            {name:"自动聚合",desc:"自动聚合",path:"map2dClusterLayerPage", image_url:"/static/images/map2d/map2d_high_cluster.png"},
            {name:"漫游",desc:"漫游",path:"map2dMoveMarkerPage", image_url:"/static/images/map2d/map2d_high_movemarker.png"},

          ]
        },
      ],
    }
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 120) + 'px';
    },
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {

  }
}
</script>

<style lang="stylus" scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 280px;
  height:260px;
  text-align:center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.container
  width: 100%
  h1.topTitle
    text-align: center

</style>